<style>
    .textbox {
        height:22px;
        padding:0 2px;
    }
</style>
<script>
    $(function(){
        $("#datagrid").datagrid({
            url:"datagrid.json",
            columns:[[
                {
                    field:"id",
                    title:"标识符"
                },{
                    field:"username",
                    title:"用户名"
                },{
                    field:"email",
                    title:"电子邮件"
                }
            ]],
            toolbar:"#datagrid-toolbar"
        });
        $("#dlg").dialog({
            title:'编辑',
            closed:'true',
            buttons:[
                {
                    text:'确定',
                    iconCls:'icon-ok',
                    handler:function(){
                        var rowObj = $("#datagrid").datagrid("getSelected");
                        console.log(rowObj);
                        if(rowObj !== null){
                            var index = $("#datagrid").datagrid("getRowIndex",rowObj);
                            var row = {
                                id:$("#id").val(),
                                username:$("#username").val(),
                                email:$("#email").val()
                            };
                            $("#datagrid").datagrid("updateRow",{
                                index:index,
                                row:row
                            });
                        }
                        $("#dlg").dialog("close");
                    }
                },
                {
                    text:'取消',
                    iconCls:'icon-cancel',
                    handler:function(){
                        $("#dlg").dialog("close");
                    }
                }

            ]
        })
        op={
            edit:function(){
                var selected = $("#datagrid").datagrid("getSelected");
                if(selected!==null){
                    $("#id").val(selected.id);
                    $("#username").val(selected.username);
                    $("#email").val(selected.email);
                    $("#dlg").dialog("open");

                }
                console.log(selected);
                alert("selected");
            }
        }
    })
</script>
<table id="datagrid"></table>
<div id="datagrid-toolbar">
    <a class="easyui-linkbutton" iconCls="icon-add" onclick="op.edit();">添加</a>
    <a class="easyui-linkbutton" iconCls="icon-remove">删除</a>
</div>
<div id="dlg">
    <p>
        <label for="id">标识符</label>
        <input name="id" type="text" id="id" disabled class="textbox">
    </p>
    <p>
        <label for="username">用户名</label>
        <input name="username" type="text" id="username" class="textbox">
    </p>
    <p>
        <label for="email">邮箱</label>
        <input name="email" type="text" id="email" class="textbox">
    </p>
</div>